import React from "react";
import { generateAvatar } from "../mock/utils";
import type { Friend } from "../mock/types";

interface GroupAvatarProps {
  members: Friend[];
  size?: number;
}

const GroupAvatar: React.FC<GroupAvatarProps> = ({ members, size = 40 }) => (
  <div className="avatar-group -space-x-4">
    {members.slice(0, 4).map((member) => (
      <div className="avatar" key={member.id}>
        <div className="w-10">{generateAvatar(member.name, "bg-blue-500")}</div>
      </div>
    ))}
    {members.length > 4 && (
      <div className="avatar placeholder">
        <div className="w-10 bg-gray-300 text-gray-600 flex items-center justify-center rounded-full">
          <span>+{members.length - 4}</span>
        </div>
      </div>
    )}
  </div>
);

export default GroupAvatar;
